<template>
    <el-table
    :data="tableData"
    style="width: 100%">
     <el-table-column
      label="id"
     >
      <template slot-scope="scope">
        <el-popover>
          <p>id: {{ scope.row.id }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.id }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="日期"
     >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" v-slot="props">
      <template>
        <el-button
          size="mini"
          @click="compile(props.row)"
       >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="delDate(props.row.id)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
   
</template>

<script>
import vm from '../../vm/vm'
export default {
        created(){
              vm.$on("fromData",res=>{
                 const obj = {
                      id:this.tableData[0].id*1+1,
                      date:res.date,
                      name:res.name,
                      address:this.tableData[0].address
                  }
                  this.tableData.unshift(obj)
                  
                
              })

          },
 data() {
      return {
      
        tableData: [
          {
            id:"6",
            date:"2020-1-23",
            name:"黄轩"
          },
          {
            id:"5",
            date:"2020-1-19",
            name:"慕容云海"
          },
          {
            id:"4",
            date:"2020-1-17",
            name:"白展堂"
          },
          {
            id:"3",
            date:"2020-1-16",
            name:"郭芙蓉"
          },
          {
            id:"2",
            date:"2020-1-14",
            name:"王昭君"
          },
          {
            id:"1",
            date:"2020-1-13",
            name:"李白"
          },
        ]
      }
    },
    methods: {
     delDate(id){
        console.log(id);
        this.tableData.splice(this.tableData.length-id ,1)
         localStorage.setItem("userInfo",JSON.stringify(this.tableData))
     },
    compile(row){
      //传递数据
      vm.$emit("sendData",row)
      
    }
    }
}

</script>

<style>
.el-tag{
      border: none; 
      background:none ;
}
</style>